

<div class="aw-content-wrap">
    <div class="mod">
        <div class="mod-head">
            <h3>
                <ul class="nav nav-tabs">
                    <li class="active"><a href="http://127.0.0.1/wenda/?/#_members" data-toggle="tab" id="members">会员组</a></li>
                    <li class=""><a href="http://127.0.0.1/wenda/?/#_system" data-toggle="tab" id="system">系统组</a></li>
                    <li class=""><a href="http://127.0.0.1/wenda/?/#_custom" data-toggle="tab" id="custom">特殊组</a></li>
                </ul>
            </h3>
        </div>
        <div class="mod-body tab-content">
            <div class="tab-pane active" id="_members">
                <div class="table-responsive">
                    <form id="batchs_form" action="http://127.0.0.1/wenda/?/admin/ajax/save_user_group/" method="post" onsubmit="return false;">
                        <table class="table table-striped" id="members_table">
                            <thead>
                            <tr>
                                <th><div class="icheckbox_square-blue" style="position: relative;"><input type="checkbox" class="check-all" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; border: 0px; opacity: 0; background: rgb(255, 255, 255);"><ins class="iCheck-helper" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; border: 0px; opacity: 0; background: rgb(255, 255, 255);"></ins></div></th>
                                <th>ID</th>
                                <th>会员组名称</th>
                                <th>威望介于</th>
                                <th>威望系数</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td><div class="icheckbox_square-blue" style="position: relative;"><input type="checkbox" value="5" name="group_ids[]" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; border: 0px; opacity: 0; background: rgb(255, 255, 255);"><ins class="iCheck-helper" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; border: 0px; opacity: 0; background: rgb(255, 255, 255);"></ins></div></td>
                                <td>5</td>
                                <td>
                                    <input class="form-control" type="text" name="group[5][group_name]" value="注册会员">
                                </td>
                                <td class="form-inline">
                                    <div class="form-group">
                                        <input type="text" name="group[5][reputation_lower]" value="0" class="form-control control-value">
                                        ~
                                        <input type="text" name="group[5][reputation_higer]" class="form-control max-value" value="100">
                                    </div>
                                </td>
                                <td><input type="text" name="group[5][reputation_factor]" class="form-control" value="1"></td>
                                <td><a href="http://127.0.0.1/wenda/?/admin/user/group_edit/group_id-5" title="" class="icon icon-edit md-tip" data-original-title="权限编辑"></a></td>
                            </tr>
                            <tr>
                                <td><div class="icheckbox_square-blue" style="position: relative;"><input type="checkbox" value="6" name="group_ids[]" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; border: 0px; opacity: 0; background: rgb(255, 255, 255);"><ins class="iCheck-helper" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; border: 0px; opacity: 0; background: rgb(255, 255, 255);"></ins></div></td>
                                <td>6</td>
                                <td>
                                    <input class="form-control" type="text" name="group[6][group_name]" value="初级会员">
                                </td>
                                <td class="form-inline">
                                    <div class="form-group"><select class="form-control min-value" name="group[6][reputation_lower]"><option value="100">100</option><option value="200">200</option><option value="500">500</option><option value="1000">1000</option><option value="999999">999999</option></select>

                                        ~
                                        <input type="text" name="group[6][reputation_higer]" class="form-control max-value" value="200">
                                    </div>
                                </td>
                                <td><input type="text" name="group[6][reputation_factor]" class="form-control" value="1"></td>
                                <td><a href="http://127.0.0.1/wenda/?/admin/user/group_edit/group_id-6" title="" class="icon icon-edit md-tip" data-original-title="权限编辑"></a></td>
                            </tr>
                            <tr>
                                <td><div class="icheckbox_square-blue" style="position: relative;"><input type="checkbox" value="7" name="group_ids[]" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; border: 0px; opacity: 0; background: rgb(255, 255, 255);"><ins class="iCheck-helper" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; border: 0px; opacity: 0; background: rgb(255, 255, 255);"></ins></div></td>
                                <td>7</td>
                                <td>
                                    <input class="form-control" type="text" name="group[7][group_name]" value="中级会员">
                                </td>
                                <td class="form-inline">
                                    <div class="form-group"><select class="form-control min-value" name="group[7][reputation_lower]"><option value="100">100</option><option value="200">200</option><option value="500">500</option><option value="1000">1000</option><option value="999999">999999</option></select>

                                        ~
                                        <input type="text" name="group[7][reputation_higer]" class="form-control max-value" value="500">
                                    </div>
                                </td>
                                <td><input type="text" name="group[7][reputation_factor]" class="form-control" value="1"></td>
                                <td><a href="http://127.0.0.1/wenda/?/admin/user/group_edit/group_id-7" title="" class="icon icon-edit md-tip" data-original-title="权限编辑"></a></td>
                            </tr>
                            <tr>
                                <td><div class="icheckbox_square-blue" style="position: relative;"><input type="checkbox" value="8" name="group_ids[]" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; border: 0px; opacity: 0; background: rgb(255, 255, 255);"><ins class="iCheck-helper" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; border: 0px; opacity: 0; background: rgb(255, 255, 255);"></ins></div></td>
                                <td>8</td>
                                <td>
                                    <input class="form-control" type="text" name="group[8][group_name]" value="高级会员">
                                </td>
                                <td class="form-inline">
                                    <div class="form-group"><select class="form-control min-value" name="group[8][reputation_lower]"><option value="100">100</option><option value="200">200</option><option value="500">500</option><option value="1000">1000</option><option value="999999">999999</option></select>

                                        ~
                                        <input type="text" name="group[8][reputation_higer]" class="form-control max-value" value="1000">
                                    </div>
                                </td>
                                <td><input type="text" name="group[8][reputation_factor]" class="form-control" value="1"></td>
                                <td><a href="http://127.0.0.1/wenda/?/admin/user/group_edit/group_id-8" title="" class="icon icon-edit md-tip" data-original-title="权限编辑"></a></td>
                            </tr>
                            <tr>
                                <td><div class="icheckbox_square-blue" style="position: relative;"><input type="checkbox" value="9" name="group_ids[]" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; border: 0px; opacity: 0; background: rgb(255, 255, 255);"><ins class="iCheck-helper" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; border: 0px; opacity: 0; background: rgb(255, 255, 255);"></ins></div></td>
                                <td>9</td>
                                <td>
                                    <input class="form-control" type="text" name="group[9][group_name]" value="核心会员">
                                </td>
                                <td class="form-inline">
                                    <div class="form-group"><select class="form-control min-value" name="group[9][reputation_lower]"><option value="100">100</option><option value="200">200</option><option value="500">500</option><option value="1000">1000</option><option value="999999">999999</option></select>

                                        ~
                                        <input type="text" name="group[9][reputation_higer]" class="form-control max-value" value="999999">
                                    </div>
                                </td>
                                <td><input type="text" name="group[9][reputation_factor]" class="form-control" value="1"></td>
                                <td><a href="http://127.0.0.1/wenda/?/admin/user/group_edit/group_id-9" title="" class="icon icon-edit md-tip" data-original-title="权限编辑"></a></td>
                            </tr>
                            <tr id="members_add_form" class="hide">
                                <td></td>
                                <td></td>
                                <td>
                                    <input type="text" class="form-control" name="group_new[group_name][]" placeholder="用户组名称">
                                </td>
                                <td class="form-inline">
                                    <div class="form-group">
                                        <input class="new_input" type="text" name="group_new[reputation_lower][]">
                                        ~ <input type="text" class="input-small max-value form-control" name="group_new[reputation_higer][]">
                                    </div>
                                </td>
                                <td><input type="text" class="input-small form-control" name="group_new[reputation_factor][]"></td>
                                <td></td>
                            </tr>
                            </tbody>
                        </table>
                        <div class="mod-table-foot">
                            <a class="btn btn-primary add">新增</a>
                            <a class="btn btn-primary" onclick="AWS.ajax_post($(&#39;#batchs_form&#39;));">保存</a>
                            <a class="btn btn-danger" onclick="AWS.ajax_post($(&#39;#batchs_form&#39;));">删除</a>
                        </div>
                    </form>
                </div>
            </div>

            <div class="tab-pane" id="_system">
                <table class="table table-striped">
                    <thead>
                    <tr>
                        <th>ID</th>
                        <th>系统组名称</th>
                        <th></th>
                    </tr>
                    </thead>
                    <tbody>
                        <foreach name="group" item="vo">
                            <tr>
                                <td>{$vo[id]}</td>
                                <td>{$vo[group_name]}</td>
                                <td><a href="http://127.0.0.1/wenda/?/admin/user/group_edit/group_id-1" title="" class="icon icon-edit md-tip" data-original-title="权限编辑"></a></td>
                            </tr>
                        </foreach>
                    </tbody>
                </table>
            </div>

            <div class="tab-pane" id="_custom">
                <form method="post" action="http://127.0.0.1/wenda/?/admin/ajax/save_custom_user_group/" id="custom_form">
                    <table class="table table-striped" id="custom_table">
                        <thead>
                        <tr>
                            <th><div class="icheckbox_square-blue" style="position: relative;"><input type="checkbox" class="check-all" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; border: 0px; opacity: 0; background: rgb(255, 255, 255);"><ins class="iCheck-helper" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; border: 0px; opacity: 0; background: rgb(255, 255, 255);"></ins></div></th>
                            <th>ID</th>
                            <th>名称</th>
                            <th></th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr id="custom_add_form" class="hide">
                            <td></td>
                            <td></td>
                            <td><input type="text" class="form-control" name="group_new[group_name]" placeholder="用户组名称"></td>
                            <td></td>
                        </tr>
                        </tbody>
                    </table>
                </form>
                <div class="mod-table-foot">
                    <a class="btn btn-primary" onclick="$(&#39;#custom_table&#39;).append(&#39;&lt;tr&gt;&#39; + $(&#39;#custom_add_form&#39;).html() + &#39;&lt;/tr&gt;&#39;)">新增</a>
                    <a class="btn btn-primary" onclick="AWS.ajax_post($(&#39;#custom_form&#39;));">保存</a>
                    <a class="btn btn-danger" onclick="AWS.ajax_post($(&#39;#custom_form&#39;));">删除</a>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function () {

        // 遍历生成select的option
        var select_arr = get_select_arr(), input_arr = [], template = get_select_template(select_arr);

        // 替换原来的input为select
        $.each($('#members_table .control-value'), function (i, e)
        {
            if (i > 0)
            {
                $(this).parents('.form-group').prepend('<select class="form-control min-value" name="' + $(this).attr('name') + '">' + template + '</select>');
                if ($.inArray($(this).val(), select_arr) != -1)
                {
                    var val = $(this).parents('.form-group').find('option').eq($.inArray($(this).val(), select_arr)).val();
                    $(this).parents('.form-group').find('select').val(val);
                }
                $(this).detach();
            }
        });

        var _index = $('#members_table .max-value').length - 1;
        $('#members_table .max-value:lt(' + _index + ')').change(function()
        {
            var select_arr = get_select_arr(), input_arr = [], template = get_select_template(select_arr);
            $.each($('#members_table select'), function (i, e)
            {
                input_arr.push($(this).val());
            });
            $('#members_table select').html(template);
            $.each($('#members_table select'), function (i, e)
            {
                $(this).val(input_arr[i]);
            });
        });

        //新加用户组
        $('.add').click(function()
        {
            $('#members_table').append('<tr class="new">' + $('#members_add_form').html() + '</tr>');

            if ($('#members_table tbody tr').length != 2)
            {
                var select_arr = get_select_arr(), template = get_select_template(select_arr);
                $('#members_table .new_input').parents('.form-group').prepend('<select class="form-control min-value" name="group_new[reputation_lower][]"></select>');
                $('#members_table .new_input').detach();
                $('#members_table select').last().append(template);
            }
        });

        function get_select_arr ()
        {
            var arr = [];
            $.each($('#members_table .max-value'), function (i, e)
            {
                if ($('#members_table .max-value').length == 1 || i != $('#members_table .max-value').length - 1)
                {
                    if ($(this).val() != '')
                    {
                        arr.push($(this).val());
                    }
                }

            });
            return arr;
        }

        function get_select_template (arr)
        {
            var template = '';
            $.each(arr, function (i, e)
            {
                template = template +  '<option value="' + e + '">' + e + '</option>';
            });
            return template
        }
    });
</script>

